<template>
  <var-app-bar title-position="center" color="var(--system-primary-color)"  :title="props.title">
    <template #left>
      <var-button color="transparent" text-color="#fff" round text @click="props.sourcePath ? router.push(props.sourcePath):router.back()">
        <var-icon name="chevron-left" :size="24" />
      </var-button>
    </template>
  </var-app-bar>
</template>
<script setup name="AppBar">
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps({
  sourcePath: {
    type: String,
    required:true
  },
  title: {
    type: String,
    default:'标题'
  }
})
const router = useRouter();
</script>
